<template>
  <div class="shop-balance-div">
    <div class="shop-balance-info">
      <div class="can-use">
        <p>可提现金额 （元）
          <!-- <a-tooltip placement="topLeft">
            <template slot="title">
              <span>可用店铺余额=店铺余额-不可用店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip> -->
        </p>
        <p>
          <!-- <a-statistic style="display:inline-block; margin-right: 20px" :precision="2" :value="shopInfo.balanceAvailable | $number2Price" /> -->
          <a-statistic style="display:inline-block; margin-right: 20px" :precision="2" :value="shopInfo.balanceCash | $number2Price" />
          <permission authority="shop:balance:withdraw">
            <a-button @click="withdrawFun">提现</a-button>
          </permission>
          <!-- <span>可提现金额
            <a-statistic style="display:inline-block" :precision="2" :value="shopInfo.balanceCash | $number2Price" >
            </a-statistic>
          </span> -->
        </p>
      </div>
      <div class="wait-settlement">
        <p>待结算（元）
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>交易未完成的订单总额，消费者确认收货后将自动转入店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <a-statistic :precision="2" :value="shopInfo.balanceUnsettle | $number2Price" />
        </p>
      </div>
      <div class="cannot-use">
        <p>冻结余额（元）
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>提现中或者退款中的冻结店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <a-statistic :precision="2" :value="shopInfo.balanceUnavailable | $number2Price" />
        </p>
      </div>
    </div>
    <!-- tab切换 -->
    <a-tabs type="card" :activeKey="activeKey" @change="tabsChange">
      <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.name">
        <shopBalanceTable :tab="item.key" :curTab="activeKey" :userIdType="userIdType"></shopBalanceTable>
      </a-tab-pane>
    </a-tabs>
    <!-- 供应商/分销商 提现账单弹窗 -->
    <chooseBill :visible="infoVisible" @cancel="closeModal"></chooseBill>
    <!-- 设置推荐文章数量弹窗 -->
    <a-modal
      title="提现"
      :visible="shopWithdrawVisible"
      :destroyOnClose="true"
      :confirmLoading="shopWithdrawLoading"
      @ok="shopWithdraw"
      @cancel="shopWithdrawVisible=false" >
      <a-form layout="inline" :form="shopWithdrawForm">
        <a-form-item label="提现金额">
          <a-input-number allowClear style="width: 200px;" v-model="shopWithdrawForm.money" :min="0" :max="shopInfo.money" placeholder="请输入提现金额"></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import shopBalanceTable from './components/table';
import chooseBill from './components/chooseBill';

export default {
  name: 'shopBalance',
  components: {
    shopBalanceTable,
    chooseBill
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      shopInfo: {}, // 店铺信息
      activeKey: '1', // 当前活动tab
      tabs: [ // 标签页集合
        { name: '已结算明细', key: '1', authority: '', title: '已结算明细' },
        { name: '待结算明细', key: '2', authority: '', title: '待结算明细' }
      ],
      infoVisible: false, // 提现账单弹窗是否显示
      shopWithdrawVisible: false, // 店铺提现
      shopWithdrawLoading: false, // 店铺提现
      shopWithdrawForm: {
        money: 0,
      }
    };
  },
  computed: {
    type() { // 返回本页携带的活跃tab
      return this.$route.query.type || '1';
    },
    userIdType() {
      return this.$store.state.userInfo.userIdType
    }
  },
  created() {
    this.activeKey = this.type || '1'
  },
  mounted() {
    this.getShopInfo()
  },
  methods: {
    // 获取店铺信息
    getShopInfo () {
      this.$get('/shop/queryById', {id: this.$store.state.userInfo.shopId}).then(res => {
        if (res && res.returnCode === 1000) {
          res.dataInfo.money = Number((res.dataInfo.balanceCash/100).toFixed(2))
          this.shopInfo = res.dataInfo
        }
      })
    },
    // tab切换
    tabsChange(val) {
      this.activeKey = val
    },
    // 提现账单选择
    withdrawFun() {
      if(this.$store.state.userInfo.userIdType == 3 || this.$store.state.userInfo.userIdType == 4) {
        this.infoVisible = true
      } else if(this.$store.state.userInfo.userIdType == 1 || this.$store.state.userInfo.userIdType == 2) {
        this.shopWithdrawVisible = true
        this.shopWithdrawForm.money=0
      }
    },
    // 店铺提现
    shopWithdraw() {
      if(!this.shopWithdrawForm.money){
        this.$message.warning('请输入提现金额！')
        return
      }
      this.shopWithdrawLoading = true
      this.$confirm({
        title: '提示',
        content: '请确认是否提现？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$post('/shop/bill/withdrawal',
            {
              withdrawalPrice: Math.round(this.shopWithdrawForm.money * 10 * 10)
            })
          .then(res => {
            this.shopWithdrawLoading = false
            if (res && res.returnCode === 1000) {
              this.shopWithdrawVisible = false
              this.getShopInfo()
              this.$message.success('提现成功，预计1-3个工作日到账。')
            }
          })
          .catch(err => {
            this.shopWithdrawLoading = false
            // this.$message.error('提现失败！')
          })
        },
        onCancel: () => {
          this.shopWithdrawVisible = false
          this.shopWithdrawLoading = false
        }
      });
    },
    // 关闭弹窗
    closeModal(freshTable) {
      this.infoVisible = false
    },
  }
};
</script>

<style lang="less" scoped>
.shop-balance-div {
  .shop-balance-info {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }
  .shop-balance-record-title {
    margin-bottom: 20px;
    height: 40px;
    padding: 0 20px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .balance {
    font-size: 22px;
  }
  .icon-gray {
    
    color: #999;
    font-size: 14px;
  }
}
</style>
